<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-home-member {
            padding: 40px;
        }

        .page-home-member-title {
            margin-bottom: 40px;
        }

        .page-home-member-card {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 88px;
            -ms-flex: 0 0 88px;
            flex: 0 0 88px;
            height: 124px;
            background: #fff;
            -webkit-box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            box-shadow: 3px 2px 9px 0px rgba(145, 124, 24, 0.49);
            border-radius: 16px;
            position: relative;
            padding-top: 80px;
            margin-bottom: 36px;
        }

        .page-home-member-card-list {
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .page-home-member-card .avatar {
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            top: -20px;
            width: 56px;
            height: 56px;
            background-color: #fff;
            border-radius: 100%;
            overflow: hidden;
            border: 4px solid #fff;
        }

        .page-home-member-card .avatar img {
            width: 48px;
            height: 48px;
            display: block;
        }

        .page-home-member-card .name,
        .page-home-member-card .title {
            line-height: 1.38888889em;
        }
    </style>

</head>

<body>
    <div class="page-main">
        <div class="page-main-container">
            <div class="child-view page-home-member">
                <div flex="cross:bottom" class="ui-pd-l-10 page-home-member-title">
                    <span class="ui-text-28">家庭成员</span>
                    <span class="ui-text-18">（共{{.memberNum}}人）</span>
                </div>
                <div flex="main:justify" class="page-home-member-card-list">
                    {{range .memberList}}
                        <div class="page-home-member-card">
                            <div flex="main:justify cross:center" class="avatar"><img src="/static/front/images/1.png" alt="" srcset=""></div>
                            <div class="name ui-text-10 ui-text-center">姓名：{{.RealName}}</div>
                            <div class="title ui-text-10 ui-text-center">称谓：{{.StudentRelation.Name}}</div>
                        </div>
                    {{end}}
                </div>
            </div>
        </div>
    </div>
</body>
</html>